<template>
  <div>
    <el-card>
      <div style="margin-bottom: 16px;">
        <el-form :inline="true" :model="filters" @submit.prevent>
          <el-form-item label="订单号">
            <el-input v-model="filters.order_id" placeholder="模糊搜索订单号" clearable />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filters.order_status" placeholder="全部" clearable>
              <el-option label="全部" :value="''" />
              <el-option label="已完成" :value="true" />
              <el-option label="未完成" :value="false" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchOrders">查询</el-button>
            <el-button @click="resetFilters">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="orders" style="width: 100%">
        <el-table-column prop="order_id" label="订单号" />
        <el-table-column prop="order_user" label="用户" />
        <el-table-column prop="order_product" label="产品" />
        <el-table-column prop="order_status" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.order_status ? 'success' : 'info'">
              {{ row.order_status ? '已完成' : '未完成' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button size="small" @click="toggleStatus(row)">切换状态</el-button>
            <el-button size="small" type="danger" @click="deleteOrder(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          @current-change="fetchOrders"
          @size-change="fetchOrders"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[2, 5, 10, 20]"
          style="margin-top: 16px;"
      />
    </el-card>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from 'axios'

const orders = ref([])
const filters = reactive({
  order_id: '',
  order_status: ''
})
const pagination = reactive({
  page: 1,
  size: 2,
  total: 0
})

const fetchOrders = async () => {
  try {
    const params = {
      page: pagination.page,
      size: pagination.size,
      ...filters
    }
    const {data} = await axios.get('http://127.0.0.1:8000/orders/', {params})
    orders.value = data.results
    pagination.total = data.count
  } catch (e) {
    ElMessage.error('获取订单失败')
  }
}

const resetFilters = () => {
  filters.order_id = ''
  filters.order_status = ''
  fetchOrders()
}

const toggleStatus = async (row) => {
  try {
    await axios.put(`http://127.0.0.1:8000/orders/${row.id}/status/`)
    ElMessage.success('状态切换成功')
    fetchOrders()
  } catch (e) {
    ElMessage.error('切换状态失败')
  }
}

const deleteOrder = async (row) => {
  ElMessageBox.confirm('确定要删除该订单吗？', '提示', {type: 'warning'})
      .then(async () => {
        await axios.delete(`http://127.0.0.1:8000/orders/${row.id}/`)
        ElMessage.success('删除成功')
        fetchOrders()
      })
      .catch(() => {
      })
}

onMounted(fetchOrders)
</script>